<!DOCTYPE html>
<html lang="en" class="h-full" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Paperless-AI</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/dashboard.css">
</head>
<body class="h-full bg-secondary">
    <button id="themeToggle" class="theme-toggle">
        <i class="fas fa-moon"></i>
    </button>

    <div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
        <div class="material-card w-full max-w-md">
            <div class="text-center mb-8">
                <div class="flex flex-col items-center justify-center gap-4 mb-6">
                    <img src="/favicon.ico" class="no-invert" alt="Paperless AI Logo" style="height: 60px;">
                    <h1 class="brand-title text-2xl">Paperless-AI</h1>
                </div>
                <h2 class="text-xl font-bold">Sign in to your account</h2>
            </div>

            <form class="space-y-6" action="/login" method="POST">
                <div>
                    <label for="username" class="block text-sm font-medium mb-2">Username</label>
                    <input id="username" 
                           name="username" 
                           type="text" 
                           required 
                           class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-accent-primary"
                           placeholder="Enter your username">
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium mb-2">Password</label>
                    <input id="password" 
                           name="password" 
                           type="password" 
                           required 
                           class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-accent-primary"
                           placeholder="Enter your password">
                </div>

                <% if (error) { %>
                    <div class="text-red-500 text-sm text-center bg-red-50 p-3 rounded-md">
                        <%= error %>
                    </div>
                <% } %>

                <div>
                    <button type="submit" 
                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                        Sign in
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
    // Theme Management für die Login-Seite
    class ThemeManager {
        constructor() {
            this.themeToggle = document.getElementById('themeToggle');
            this.initialize();
        }

        initialize() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            this.setTheme(savedTheme);
            
            this.themeToggle.addEventListener('click', () => this.toggleTheme());
        }

        setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            
            const icon = this.themeToggle.querySelector('i');
            icon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
        }

        toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            this.setTheme(newTheme);
        }
    }

    // Initialize Theme Manager when DOM is loaded
    document.addEventListener('DOMContentLoaded', () => {
        window.themeManager = new ThemeManager();
    });
    </script>
</body>
</html>